<template>
	<view class="wrap">
		<view class="cell">
			<text class="label require">商品基本信息</text>
		</view>
		<view class="cell">
			<text class="label">商品名称</text>
			<input type="text" maxlength="15" v-model.trim="goodsInfo.name" placeholder="请输入商品名称" placeholder-class="placeholder" />
		</view>
		<view class="cell upload-cell">
			<text class="label">商品图片</text>
			<view class="upload">
				<image mode="aspectFill" src="" @click="uploadImg"></image>
			</view>
		</view>
		<view class="cell">
			<text class="label">商品描述</text>
		</view>
		<textarea :value="goodsInfo.description" maxlength="80" data-name="description" @input="onTextInput" placeholder="请简单描述一下此商品"
		 placeholder-class="placeholder" />

		<view class="cell top-line">
		 <text class="label require">选择时间</text>
	   </view>
	<!--   <view class="cell">
	     <text class="label">不限时</text>
		 <checkbox-group bindchange="radioChoose">
			<checkbox></checkbox>
		 </checkbox-group>
	   </view> -->
<!-- 	   <view class="cell">
	     <text>选择时间</text>
	     <picker mode="date" :value="date" :data-start="1" @change="bindDateChange">
	       <view>{{startDate}}</view>
	     </picker>
	     <view class="line">
	       ————
	     </view>
	     <picker mode="date" :value="date" :data-end="1" @change="bindDateChange">
	       <view>{{endDate}}</view>
	     </picker>
	   </view> -->
	   <view class="cell">
	     <text class="label">租金</text>
	     <input type="number" :value="goodsInfo.price" data-name="price" @input="onTextInput" maxlength="5" placeholder="请输入租金" placeholder-class="placeholder" />
		 <text>元/天</text>
	   </view>
	   <view class="cell">
	     <text class="label">押金</text>
	     <input type="number" :value="goodsInfo.deposit" style="width: 82%;" data-name="deposit" @input="onTextInput" placeholder="请输入押金" placeholder-class="placeholder" />
		 <text>元</text>
	   </view>
	   <view class="cell">
	     <text class="label">配送费</text>
	     <input type="number" :value="goodsInfo.shippingFee" data-name="shippingFee" @input="onTextInput" placeholder="请输入配送费" placeholder-class="placeholder" />
		 <text>元</text>
	   </view>
	   <view class="cell">
	     <text class="label">配送范围</text>
	     <input type="number" :value="goodsInfo.shippingScope" style="width: 75%;" data-name="shippingScope" @input="onTextInput" placeholder="请输入配送范围" placeholder-class="placeholder" />
		 <text>km</text>
	   </view>
	   <view class="cell">
	     <button class="draft" hover-class="" @click="release" :data-status="3">存为草稿</button>
	     <button class="submit" hover-class="" @click="release" :data-status="1">发布</button>
	   </view>
		</view>
</template>

<script>
	import {utils, numeral} from '../../utils/index.js'
	import {Goods} from '../../apis/index.js'
	
		export default {
				data() {
					return {
					options: {},
					isLoading: false,
					submitDisabled: true,
					startDate: '请选择时间',
					endDate: '请选择时间',
					goodsInfo: {
						shopId: '3',
						name: '',
						status: '',
						picUrls: '',
						description: '',
						price: '',
						deposit:'',
						shippingFee: '',
						shippingScope:''
						},
					}
				},
	  onLoad (options) {
	    this.options = options
	    options.id && getGoodsInfo.call(this)
	  },
			methods: {
				onTextInput (e) {
					this.goodsInfo[e.currentTarget.dataset.name] = e.detail.value.trim()
				},
				bindDateChange (e){
					if(e.currentTarget.dataset.start == '1'){
						this.startDate = e.target.value
					}else{
						this.endDate = e.target.value
					}
				},
				uploadImg () {
					utils.uploadImage({
						count: 1
					}).then(res => {
						console.log('上传成功', res)
					}, err => {
						console.error('上传图片失败', err)
					})
				},
				radioChoose () {
					
				},
				release (e) {
					this.goodsInfo.status = e.currentTarget.dataset.status //1：在售, 3 草稿
					if (this.isLoading) return 
					this.isLoading = true
					utils.wxLoading()
          const shopInfo = uni.getStorageSync('shopInfo')
          this.goodsInfo.shopId = shopInfo.id
          let goodsInfo = utils.deepClone(this.goodsInfo)
          // 计算价格
          goodsInfo.price = numeral(goodsInfo.price).multiply(100).value()
          goodsInfo.deposit = numeral(goodsInfo.deposit).multiply(100).value()
          goodsInfo.shippingFee = numeral(goodsInfo.shippingFee).multiply(100).value()
					Goods[goodsInfo.id ? 'updateGoods' : 'addGoods']({
						data: {
							form: goodsInfo
						}
					}).then(res => {
						this.isLoading = false
						uni.hideLoading()
						utils.wxToastSuccess('操作成功', utils.routerBack)
					}, err => {
						this.isLoading = false
						uni.hideLoading()
						console.error('操作失败', err)
					})
				}
			}
		}
		function getGoodsInfo () {
		  Goods.getGoodsDetail({
		    data: {
		      query: {
		        id: this.options.id
		      }
		    }
		  }).then(res => {
		    console.log('获取商品详情成功')
		    console.log(res.data)
		    if (res.data.code === 200) {
          // 处理价格、运费、押金
          res.data.list.price = numeral(res.data.list.price).divide(100).format('0.00')
          res.data.list.deposit = numeral(res.data.list.deposit).divide(100).format('0.00')
          res.data.list.shippingFee = numeral(res.data.list.shippingFee).divide(100).format('0.00')
		      this.goodsInfo = res.data.list
		    } else {
		      utils.wxToastFail('获取数据失败')
		    }
		  }, err => {
		    console.error(err)
		  })
		}
</script>

<style lang="scss">
	page {
	  background-color: #EFEFEF;
	}
	button {
	  background-color: #FF4A4A;
	  font-size: 28rpx;
	  color: #FFFFFF;
	  height: 60rpx;
	  line-height: 60rpx;
	  // width: 140rpx;
	  margin: unset;
	  &::after {
	    border-radius: unset;
	  }
	  &.submit {
	    
	  }
	}
	.cell {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  font-size: 28rpx;
	  box-sizing: border-box;
	  padding: 0 20rpx;
	  margin-top: 1rpx;
	  min-height: 88rpx;
	  line-height: 88rpx;
	  background-color: #FFFFFF;
	  margin-top: 1rpx;
	  
	  .label {
	    font-size: 28rpx;
	    box-sizing: border-box;
	    padding-right: 10rpx;
	    &.require::before {
	      content: "*";
	      color: #F01919;
	    }
	  }
	  input {
	    text-align: right;
		width : 78%;
	  }
	  .placeholder {
	    color: #888888;
	  }
	  .value {
	    flex: 1;
	  }
	  .upload {
	    width: 120rpx;
	    height: 120rpx;
	    image {
	      width: 120rpx;
	      height: 120rpx;
	      border-radius: 10rpx;
	      background-color: #EFEFEF;
	    }
	  }
	  .line {
	    color: #999999;
	    padding: 0 20rpx;
	    text-align: center;
	  }
	  &.upload-cell {
	    padding: 20rpx;
	    justify-content: unset;
	  }
	}
	textarea {
	  width: 100%;
	  height: 160rpx;
	  box-sizing: border-box;
	  padding: 20rpx  20rpx;
	  line-height: 1.5;
	  margin-top: 1rpx;
	  font-size: 28rpx;
	  background-color: #FFFFFF;
	}
	.top-line {
	  margin-top: 20rpx;
	}
	.submit {
	  width: 690rpx;
	  height: 80rpx;
	  background-color: #FF4A4A;
	  line-height: 80rpx;
	  margin: 40rpx auto;
	  border-radius : 2rpx;
	}
	.draft{
		width: 690rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		line-height: 80rpx;
		margin: 40rpx auto;
		color: #FF4A4A;
		border-radius : 2rpx;
	}
	.draft::after{
	  border-color: #FF4A4A; 
	}
</style>
